<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>v-show</title>
</head>
<body>

<div id="app">
    <p v-show="status===1">当status为1时显示改行</p>
</div>
<!--  渲染结果  -->
<!--  <p style="display: none;">当status为1时显示改行</p>  -->


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     * v-show的用法与v-if基本一致，但是v-show是改变CSS的display属性，也就是说当v-show表达式的值为false时，元素会隐藏，但是DOM结构是存在的，
     * 此时查看DOM结构发现仅仅是元素上面多加了一个内联样式：display:none。而v-if则是不会创建DOM！
     *
     * 注意：v-show不能在<template>上使用
     *
     *
     * v-if和v-show具有非常类似的功能，不过v-if才是真正的条件渲染，它会根据表达式适当地销毁或者重建元素及绑定的事件或者子组件。
     *若表达式初始值为false，则一开始元素/组件并不会渲染，只有当条件第一次变为真才开始编译。
     *
     * v-show只是简单的CSS属性切换，无论条件真与否都会编译。相比之下，v-if更适合条件不经常发生改变的场景，因为它的开销相对较大，而v-show则适用于频繁切换条件的场景。
     * */

    var app = new Vue({
        el:"#app",
        data:{
            status:2,
        }
    })
</script>
</body>
</html>